<template>
  <div class="register-bg">
    <!-- 左上角 logo+文字 -->
    <div class="corner-logo-text">
      <img src="/logo.png" alt="logo" class="corner-logo-img" />
      <span class="corner-logo-title">{{ $t('login.logoText') }}</span>
    </div>
    
    <!-- 添加Header组件 -->
    <Header />
    
    <img class="register-bg-img" src="../../assets/images/login/首页背景.png" alt="背景" />
    <!-- 背景图片上方的文字 -->
    <div class="register-bg-text">
      <h1 class="register-main-title">{{ $t('login.mainTitle') }}</h1>
      <div class="register-sub-title">
        {{ $t('login.subTitle1') }} {{ $t('login.subTitle2') }}
      </div>
    </div>
    <div class="register-form-wrapper">
      <div class="register-form-container">
        <h2 class="form-title animate-fadeInUp" data-delay="0.2">{{ currentUserType === 'student' ? $t('register.student') : $t('register.enterprise') }}{{ $t('register.title') }}</h2>
        
        <!-- 用户类型切换按钮 -->
        <div class="user-type-switch animate-fadeInUp" data-delay="0.3">
          <div 
            :class="['switch-button', { active: currentUserType === 'student' }]"
            @click="switchToStudent"
          >
            <el-icon><User /></el-icon>
            <span>{{ $t('register.student') }}</span>
          </div>
          <div 
            :class="['switch-button', { active: currentUserType === 'enterprise' }]"
            @click="switchToEnterprise"
          >
            <el-icon><OfficeBuilding /></el-icon>
            <span>{{ $t('register.enterprise') }}</span>
          </div>
        </div>
        
        <div class="form-content" :key="'form-' + animationKey">
          <el-form ref="formRef" :model="registerForm" :rules="registerRules" label-position="top">
            <div class="form-group animate-fadeInUp" data-delay="0.4">
              <div class="floating-input-wrapper">
                <input
                  id="email"
                  v-model="registerForm.email"
                  type="email"
                  class="floating-input"
                  placeholder=" "
                  required
                  autocomplete="off"
                />
                <label for="email" class="floating-label">{{ $t('register.email') }}</label>
              </div>
            </div>
            
            <div class="form-group animate-fadeInUp" data-delay="0.5">
              <div class="floating-input-wrapper">
                <input
                  id="password"
                  v-model="registerForm.password"
                  :type="showPassword ? 'text' : 'password'"
                  class="floating-input"
                  placeholder=" "
                  required
                  autocomplete="new-password"
                  @input="validatePassword"
                />
                <label for="password" class="floating-label">{{ $t('register.password') }}</label>
                <button
                  type="button"
                  class="password-toggle"
                  @click="togglePassword"
                >
                  <svg v-if="showPassword" class="eye-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                  </svg>
                  <svg v-else class="eye-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
                  </svg>
                </button>
                <div v-if="passwordError" style="color: red; font-size: 13px; margin-top: 4px;">{{ passwordError }}</div>
              </div>
            </div>
            <div class="form-group animate-fadeInUp" data-delay="0.6">
              <div class="floating-input-wrapper">
                <input
                  id="confirm-password"
                  v-model="registerForm.confirmPassword"
                  :type="showConfirmPassword ? 'text' : 'password'"
                  class="floating-input"
                  placeholder=" "
                  required
                  autocomplete="new-password"
                  @input="validateConfirmPassword"
                />
                <label for="confirm-password" class="floating-label">{{ $t('register.confirmPassword') }}</label>
                <button
                  type="button"
                  class="password-toggle"
                  @click="toggleConfirmPassword"
                >
                  <svg v-if="showConfirmPassword" class="eye-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                  </svg>
                  <svg v-else class="eye-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
                  </svg>
                </button>
                <div v-if="confirmPasswordError" style="color: red; font-size: 13px; margin-top: 4px;">{{ confirmPasswordError }}</div>
              </div>
            </div>
            
            <!-- 用户隐私协议复选框 -->
            <div class="terms-checkbox animate-fadeInUp" data-delay="0.7">
              <label class="checkbox-wrapper">
                <el-checkbox v-model="registerForm.agreePolicy" class="checkbox" @change="onPolicyChange"></el-checkbox>
                <span class="checkbox-label">
                  {{ $t('register.agree') }}
                  <el-link type="primary" @click.prevent="openPolicy" class="terms-link">{{ $t('register.userPolicy') }}</el-link>
                  {{ $t('common.and') }}
                  <el-link type="primary" @click.prevent="openPrivacy" class="terms-link">{{ $t('register.privacyPolicy') }}</el-link>
                </span>
              </label>
            </div>
            
            <div class="button-container">
              <el-button type="primary" @click="handleRegister" :loading="isLoading" class="register-btn animate-fadeInUp" data-delay="0.8">
                <span v-if="isLoading" class="loading-spinner"></span>
                {{ isLoading ? $t('register.processing') : $t('common.next') }}
              </el-button>
            </div>
          </el-form>
        </div>
        
        <!-- 已有账号，立即登录 -->
        <div class="register-footer animate-fadeInUp" data-delay="0.9">
          <p class="login-text">
            {{ $t('register.haveAccount') }}
            <router-link 
              :to="{ path: '/login' }" 
              class="login-link"
            >
              {{ $t('login.login') }}
            </router-link>
          </p>
        </div>
      </div>
    </div>
    
    <!-- 服务条款对话框 -->
    <el-dialog
      v-model="policyDialogVisible"
      :title="$t('register.userPolicy')"
      width="60%"
      :before-close="closePolicyDialog"
      class="policy-dialog"
    >
      <div class="policy-content" v-html="policyContent"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closePolicyDialog">{{ $t('common.close') }}</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 隐私政策对话框 -->
    <el-dialog
      v-model="privacyDialogVisible"
      :title="$t('register.privacyPolicy')"
      width="60%"
      :before-close="closePrivacyDialog"
      class="policy-dialog"
    >
      <div class="policy-content" v-html="privacyContent"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closePrivacyDialog">{{ $t('common.close') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { userApi } from '../../api';
import { User, OfficeBuilding } from '@element-plus/icons-vue';
import { policyApi } from '../../api';
import Header from '../../components/layout/Header.vue';
import { ElMessage } from 'element-plus';
import { useLanguage } from '../../utils/i18n';

export default {
  components: {
    User,
    OfficeBuilding,
    Header
  },
  setup() {
    const router = useRouter();
    const { t } = useI18n();
    const { initLanguage } = useLanguage();
    const formRef = ref(null);
    
    const registerForm = reactive({
      email: '',
      password: '',
      confirmPassword: '',
      agreePolicy: false
    });
    
    const registerRules = reactive({
      email: [
        { required: true, message: t('register.emailRequired'), trigger: 'blur' },
        { type: 'email', message: t('register.invalidEmail'), trigger: 'blur' }
      ],
      password: [
        { required: true, message: t('register.passwordRequired'), trigger: 'blur' },
        { min: 8, message: t('register.passwordTooShort'), trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: t('register.confirmPasswordRequired'), trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== registerForm.password) {
              callback(new Error(t('register.passwordMismatch')));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        }
      ],
      agreePolicy: [
        { required: true, message: t('register.pleaseAgreePolicy'), trigger: 'change' }
      ]
    });
    
    const isLoading = ref(false);
    const showPassword = ref(false);
    const showConfirmPassword = ref(false);
    const passwordError = ref('');
    const confirmPasswordError = ref('');
    const currentUserType = ref('student');
    const policyDialogVisible = ref(false);
    const privacyDialogVisible = ref(false);
    const policyContent = ref('');
    const userAgreementVersion = ref('');
    const privacyContent = ref('');
    const privacyPolicyVersion = ref('');
    const animationKey = ref(0);
    
    onMounted(() => {
      loadPolicyContent();
      
      // 监听语言变化事件
      const handleLanguageChange = (event) => {
        const { language } = event.detail;
        // 强制重新渲染组件以更新语言
        animationKey.value++;
      };
      
      window.addEventListener('languageChanged', handleLanguageChange);
      
      // 清理事件监听器
      onUnmounted(() => {
        window.removeEventListener('languageChanged', handleLanguageChange);
      });
    });
    
    function validatePassword() {
      const pwd = registerForm.password;
      
      if (!pwd) {
        passwordError.value = '';
        return;
      }
      
      const hasLower = /[a-z]/.test(pwd);
      const hasUpper = /[A-Z]/.test(pwd);
      const hasNumber = /\d/.test(pwd);
      const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(pwd);
      const isLongEnough = pwd.length >= 8;
      
      let errorMessage = '';
      if (!isLongEnough) {
        errorMessage = t('validation.passwordTooShort');
      } else if (!hasLower) {
        errorMessage = t('validation.passwordMissingLower');
      } else if (!hasUpper) {
        errorMessage = t('validation.passwordMissingUpper');
      } else if (!hasNumber) {
        errorMessage = t('validation.passwordMissingNumber');
      } else if (!hasSpecial) {
        errorMessage = t('validation.passwordMissingSpecial');
      }
      
      passwordError.value = errorMessage;
      validateConfirmPassword();
    }
    
    function validateConfirmPassword() {
      if (!registerForm.confirmPassword) {
        confirmPasswordError.value = '';
        return;
      }
      
      if (registerForm.confirmPassword !== registerForm.password) {
        confirmPasswordError.value = t('validation.passwordMatch');
      } else {
        confirmPasswordError.value = '';
      }
    }
    
    async function handleRegister() {
      validatePassword();
      validateConfirmPassword();
      if (passwordError.value || confirmPasswordError.value) {
        ElMessage.error(passwordError.value || confirmPasswordError.value);
        isLoading.value = false;
        return;
      }
      
      if (!registerForm.agreePolicy) {
        ElMessage.error(t('register.pleaseAgreePolicy'));
        isLoading.value = false;
        return;
      }
      
      isLoading.value = true;
      
      try {
        const { TokenManager } = await import('../../utils/request');
        TokenManager.clearTokens();
        
        await formRef.value.validate();
        
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(registerForm.email)) {
          ElMessage.error(t('register.invalidEmail'));
          return;
        }
        
        const requestData = {
          email: registerForm.email.trim(),
          userType: currentUserType.value,
          password: registerForm.password,
          confirmPassword: registerForm.confirmPassword
        };
        
        try {
          const emailResponse = await userApi.sendActivation(requestData);
          
          ElMessage.success(t('register.registerSuccess'));
          
          localStorage.setItem('tempUserEmail', registerForm.email);
          localStorage.setItem('tempUserType', currentUserType.value);
          localStorage.setItem('tempUserPassword', registerForm.password);
          localStorage.setItem('tempUserConfirmPassword', registerForm.confirmPassword);
          
          router.push({
            path: '/email-verification',
            query: {
              email: registerForm.email,
              userType: currentUserType.value
            }
          });
        } catch (error) {
          console.error('发送邮件失败:', error);
          
          let errorMessage = t('register.unknownError');
          
          if (error.response) {
            const { status, data } = error.response;
            
            switch (status) {
              case 400:
                if (data && data.error) {
                  errorMessage = data.error;
                } else {
                  errorMessage = t('validation.required');
                }
                break;
              case 409:
                errorMessage = t('register.emailExists');
                break;
              case 500:
                if (data && data.error) {
                  errorMessage = data.error;
                } else {
                  errorMessage = t('register.serverError');
                }
                break;
              default:
                if (data && data.error) {
                  errorMessage = data.error;
                }
            }
          }
          
          ElMessage.error(errorMessage);
        }
      } catch (e) {
        console.error('注册失败:', e);
        ElMessage.error(t('register.formValidationFailed'));
      } finally {
        isLoading.value = false;
      }
    }
    
    function togglePassword() {
      showPassword.value = !showPassword.value;
    }
    
    function toggleConfirmPassword() {
      showConfirmPassword.value = !showConfirmPassword.value;
    }
    
    function onPolicyChange() {
      formRef.value.validateField('agreePolicy');
    }
    
    async function openPolicy() {
      try {
        const response = await policyApi.getUserAgreement();
        policyContent.value = response.data.content;
        userAgreementVersion.value = response.data.version;
      } catch (e) {
        console.error('加载用户协议失败:', e);
        policyContent.value = t('register.defaultUserPolicy');
        userAgreementVersion.value = '1.0';
      }
      policyDialogVisible.value = true;
    }
    
    async function openPrivacy() {
      try {
        const response = await policyApi.getPrivacyPolicy();
        privacyContent.value = response.data.content;
        privacyPolicyVersion.value = response.data.version;
      } catch (e) {
        console.error('加载隐私政策失败:', e);
        privacyContent.value = t('register.defaultPrivacyPolicy');
        privacyPolicyVersion.value = '1.0';
      }
      privacyDialogVisible.value = true;
    }
    
    function closePolicyDialog() {
      policyDialogVisible.value = false;
    }
    
    function closePrivacyDialog() {
      privacyDialogVisible.value = false;
    }
    
    async function loadPolicyContent() {
      try {
        policyContent.value = t('register.defaultUserPolicy');
        userAgreementVersion.value = '1.0';
      } catch (e) {
        console.error('加载用户协议失败:', e);
        policyContent.value = t('register.defaultUserPolicy');
        userAgreementVersion.value = '1.0';
      }
      
      try {
        privacyContent.value = t('register.defaultPrivacyPolicy');
        privacyPolicyVersion.value = '1.0';
      } catch (e) {
        console.error('加载隐私政策失败:', e);
        privacyContent.value = t('register.defaultPrivacyPolicy');
        privacyPolicyVersion.value = '1.0';
      }
    }
    
    function switchToStudent() {
      currentUserType.value = 'student';
      registerForm.email = '';
      registerForm.password = '';
      registerForm.confirmPassword = '';
      registerForm.agreePolicy = false;
      passwordError.value = '';
      confirmPasswordError.value = '';
      formRef.value.clearValidate();
      animationKey.value++;
    }
    
    function switchToEnterprise() {
      currentUserType.value = 'enterprise';
      registerForm.email = '';
      registerForm.password = '';
      registerForm.confirmPassword = '';
      registerForm.agreePolicy = false;
      passwordError.value = '';
      confirmPasswordError.value = '';
      formRef.value.clearValidate();
      animationKey.value++;
    }
    
    return {
      formRef,
      registerForm,
      registerRules,
      isLoading,
      showPassword,
      showConfirmPassword,
      passwordError,
      confirmPasswordError,
      currentUserType,
      policyDialogVisible,
      privacyDialogVisible,
      policyContent,
      userAgreementVersion,
      privacyContent,
      privacyPolicyVersion,
      animationKey,
      validatePassword,
      validateConfirmPassword,
      handleRegister,
      togglePassword,
      toggleConfirmPassword,
      onPolicyChange,
      openPolicy,
      openPrivacy,
      closePolicyDialog,
      closePrivacyDialog,
      loadPolicyContent,
      switchToStudent,
      switchToEnterprise
    };
  }
};
</script>

<style scoped>
.register-bg {
  min-height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* 背景图片上方的文字样式 */
.register-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  color: #fff;
  text-shadow: 3px 3px 8px rgba(0,0,0,0.25);
  /* 调整位置，避免被注册框遮挡 */
  margin-right: 450px;
}

.register-main-title {
  font-size: 56px;
  font-weight: bold;
  margin-bottom: 32px;
  text-shadow: 3px 3px 8px rgba(0,0,0,0.25);
}

.register-sub-title {
  font-size: 24px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.18);
  margin-bottom: 16px;
}

.register-bg-img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.register-form-wrapper {
  position: fixed;
  top: 50%;
  right: 60px;
  transform: translateY(-50%);
  width: 500px;
  max-width: 90vw;
  background: white;
  z-index: 2;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  margin-right: 20px;
  height: auto;
  max-height: 80vh;
}

.register-form-container {
  padding: 50px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: white;
  box-sizing: border-box;
  height: auto;
  max-height: 80vh;
}

.form-title {
  font-size: 2.2rem;
  font-weight: bold;
  color: #333;
  margin: 0 0 30px 0;
  text-align: left;
}

.form-content {
  width: 100%;
}

.form-group {
  margin-bottom: 20px;
}

.form-group:nth-child(2) {
  animation-delay: 0.5s;
}

.form-group:nth-child(3) {
  animation-delay: 0.6s;
}

.form-group:nth-child(2) {
  /* 移除动画延迟 */
}

.form-group:nth-child(3) {
  /* 移除动画延迟 */
}

.form-group:nth-child(4) {
  /* 移除动画延迟 */
}

/* 浮动标签样式 */
.floating-input-wrapper {
  position: relative;
}

.floating-input {
  width: 100%;
  height: 56px;
  padding: 16px 20px;
  border: 2px solid #e1e5e9;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.floating-input::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
  transition: left 0.6s;
}

.floating-input:hover::before {
  left: 100%;
}

.floating-input:hover {
  border-color: #ff6b35;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.1);
}

.floating-input:focus {
  outline: none;
  border-color: #ff6b35;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
  transform: translateY(-2px);
}

/* 移除浏览器默认的密码显示图标 */
.floating-input::-ms-reveal,
.floating-input::-ms-clear {
  display: none;
}

.floating-input::-webkit-contacts-auto-fill-button,
.floating-input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* 防止浏览器自动填充时的颜色变化 */
.floating-input:-webkit-autofill,
.floating-input:-webkit-autofill:hover,
.floating-input:-webkit-autofill:focus,
.floating-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #333 !important;
  background-color: white !important;
  background-clip: content-box !important;
}

/* 移除所有浏览器默认的输入框样式 */
.floating-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background: transparent;
}

/* 移除Element Plus可能残留的样式 */
.floating-input-wrapper :deep(.el-input__wrapper) {
  display: none !important;
}

.floating-input-wrapper :deep(.el-input__inner) {
  display: none !important;
}

/* 确保密码输入框没有额外的框，但保留边框样式 */
.floating-input[type="password"],
.floating-input[type="text"] {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.floating-label {
  position: absolute;
  left: 20px;
  top: 18px;
  font-size: 1.1rem;
  color: #333;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  transform-origin: left top;
  font-weight: 500;
}

.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
  transform: translateY(-28px) scale(0.85);
  color: #ff6b35;
  background: rgba(255, 255, 255, 0.95);
  padding: 0 8px;
  border-radius: 4px;
}

.password-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #999;
  padding: 0;
  z-index: 2;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 确保小眼睛垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* 当输入框获得焦点或有内容时，小眼睛向上移动以跟随标签位置 */
.floating-input:focus ~ .password-toggle,
.floating-input:not(:placeholder-shown) ~ .password-toggle {
  top: 18px;
  transform: translateY(0) scale(0.9);
}

.password-toggle:hover {
  color: #ff6b35;
  transform: translateY(-50%) scale(1.1);
}

/* 当输入框获得焦点或有内容时，悬停效果也要相应调整 */
.floating-input:focus ~ .password-toggle:hover,
.floating-input:not(:placeholder-shown) ~ .password-toggle:hover {
  top: 18px;
  transform: translateY(0) scale(1.1);
}

.password-toggle:focus {
  outline: none;
  box-shadow: none;
}

.eye-icon {
  width: 20px;
  height: 20px;
  color: inherit;
}

/* 用户类型选择器样式 */
.select-wrapper {
  position: relative;
}

.user-type-select {
  width: 100%;
}

/* 用户类型切换按钮 */
.user-type-switch {
  display: flex;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 25px;
  gap: 4px;
  animation: fadeIn 0.6s ease-out 0.3s both;
}

.switch-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  color: #666;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.switch-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.switch-button:hover::before {
  left: 100%;
}

.switch-button:hover {
  background: rgba(255, 107, 53, 0.1);
  color: #ff6b35;
  transform: translateY(-1px);
}

.switch-button.active {
  background: white;
  color: #ff6b35;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
  transform: scale(1.02);
}

.switch-button .el-icon {
  margin-right: 8px;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.switch-button:hover .el-icon {
  transform: scale(1.1);
}

.switch-button span {
  font-size: 14px;
}

/* 协议相关样式 */
.terms-checkbox {
  margin-bottom: 25px;
}

.terms-checkbox .checkbox-wrapper {
  align-items: flex-start;
}

.terms-checkbox .checkbox-label {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.5;
}

.terms-link {
  color: #ff6b35;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.terms-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: #ff6b35;
  transition: width 0.3s ease;
}

.terms-link:hover::after {
  width: 100%;
}

.button-container {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}

.register-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  position: relative;
  overflow: hidden;
}

.register-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.register-btn:hover::before {
  left: 100%;
}

.register-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255, 107, 53, 0.4);
}

.register-btn:active:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.register-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 已有账号，立即登录样式 */
.register-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.login-text {
  color: #666;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.login-link {
  color: #ff6b35;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.login-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: #ff6b35;
  transition: width 0.3s ease;
}

.login-link:hover::after {
  width: 100%;
}

.login-link:hover {
  transform: translateY(-1px);
}

/* 协议对话框样式 */
.policy-dialog {
  border-radius: 12px;
}

.policy-content {
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.6;
  color: #333;
  padding: 20px;
}

.policy-content h1,
.policy-content h2,
.policy-content h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #2c3e50;
}

.policy-content p {
  margin-bottom: 10px;
}

.policy-content ul,
.policy-content ol {
  margin-bottom: 10px;
  padding-left: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 动画样式 */
.animate-fadeInUp {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fadeInUp[data-delay="0.2"] {
  animation-delay: 0.2s;
}

.animate-fadeInUp[data-delay="0.3"] {
  animation-delay: 0.3s;
}

.animate-fadeInUp[data-delay="0.4"] {
  animation-delay: 0.4s;
}

.animate-fadeInUp[data-delay="0.5"] {
  animation-delay: 0.5s;
}

.animate-fadeInUp[data-delay="0.6"] {
  animation-delay: 0.6s;
}

.animate-fadeInUp[data-delay="0.7"] {
  animation-delay: 0.7s;
}

.animate-fadeInUp[data-delay="0.8"] {
  animation-delay: 0.8s;
}

.animate-fadeInUp[data-delay="0.9"] {
  animation-delay: 0.9s;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-bg-text {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .register-main-title {
    font-size: 2.5rem;
  }
  
  .register-sub-title {
    font-size: 1.1rem;
  }
  
  .register-form-wrapper {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 20px;
    width: calc(100% - 40px);
  }
  
  .register-form-container {
    padding: 40px 30px;
  }
  
  .form-title {
    font-size: 1.8rem;
  }
  
  .button-container {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .register-form-container {
    padding: 30px 20px;
  }
  
  .form-title {
    font-size: 1.5rem;
  }
  
  .terms-checkbox .checkbox-label {
    font-size: 0.8rem;
  }
}

.logo-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 10px;
  z-index: 10;
}

.register-logo {
  width: 120px;
  height: auto;
  display: block;
}

.corner-logo {
  position: absolute;
  top: 32px;
  left: 48px;
  width: 120px;
  height: auto;
  z-index: 10;
}

.corner-logo-text {
  position: absolute;
  top: 32px;
  left: 48px;
  display: flex;
  align-items: center;
  z-index: 10;
}

.corner-logo-img {
  width: 48px;
  height: 48px;
  margin-right: 12px;
}

.corner-logo-title {
  font-family: "华文隶书", "STLiti", serif;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.18);
  letter-spacing: 2px;
}
</style>